<script setup>
import SearchFormItem from './components/SearchFormItem.vue'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useProject } from '@/stores/modules/project.js'

const project = useProject()
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  searchParam: {
    type: Object,
    default: () => ({})
  },
  search: {
    type: Function,
    default: () => {}
  },
  reset: {
    type: Function,
    default: () => {}
  },
  enumMap: Map
})
const emit = defineEmits(['getElemHeight'])

const SP = ref(props.searchParam)
watch(() => props.searchParam, newVal => {
  SP.value = newVal
})

const cols = ref(0); // 一行几列
const searchFormRef = ref(null)
onMounted(() => {
  count()
})
const count = () => {
  const { clientWidth, clientHeight } = searchFormRef.value
  if(clientWidth <= 0 || clientHeight < 0) { return }
  cols.value = Math.floor((clientWidth - 24) / 300)

  if(props.columns.length >= cols.value){
    showCollapse.value = true
  } else {
    showCollapse.value = false
  }

  emit('getElemHeight', clientHeight)
}
// 是否显示展开/收起搜索框按钮
const showCollapse = ref(false)
// 是否默认折叠搜索项
const collapsed = ref(true)

const modifyCollapsed = async () => {
  collapsed.value = !collapsed.value

  await nextTick()
  const { clientHeight } = searchFormRef.value
  emit('getElemHeight', clientHeight)
}

const fill = computed(() => cols.value && (cols.value - (props.columns.length % cols.value) - 1))

const isCollapse = computed(() => project.isCollapse)
const isResize = computed(() => project.isResize)
watch([isCollapse, isResize], async (newVal, oldVal) => {
  count()

  // 在某些极限情况下 布局会出问题  先加个这个解决一下
  if(newVal[0] != oldVal[0]){
    modifyCollapsed()
    await nextTick()
    modifyCollapsed()
  }
})
</script>

<template>
  <div v-if="columns.length" class="table-search" ref="searchFormRef">
    <el-form :model="SP" label-width="auto">
      <div class="search-item-c">
        <template v-for="(FI, index) in columns">
          <div v-if="!collapsed || cols > (index + 1)" class="form-item" :key="FI.prop">
            <el-form-item :label="`${FI.label} :`">
              <SearchFormItem :column="FI" :search-param.sync="SP" :enum-map="props.enumMap"></SearchFormItem>
            </el-form-item>
          </div>
        </template>
        <template v-if="!collapsed">
          <div class="form-item" v-for="item in fill" :key="item"></div>
        </template>
        <div class="operation form-item">
          <el-button type="primary" icon="el-search" @click="search">
            搜索
          </el-button>
          <el-button icon="el-delete" @click="reset">
            重置
          </el-button>
          <el-button type="text" v-if="showCollapse" @click="modifyCollapsed">
            <template v-if="collapsed">
              展开 <i class="el-icon-arrow-down"></i>
            </template>
            <template v-else>
              收起 <i class="el-icon-arrow-up"></i>
            </template>
          </el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.table-search{
  padding: $margin;
  padding-bottom: 0;
  background-color: #fff;
  margin-bottom: $margin;
  .search-item-c{
    display: flex;
    flex-wrap: wrap;
    .form-item{
      flex: 1;
      min-width: 300px;
      margin-bottom: $margin;
    }
    .operation{
      text-align: right;
      flex-shrink: 0;
      flex: 1;
      min-width: 300px;
    }
  }
}

::v-deep.el-form-item{
  margin-bottom: 0;
  .el-form-item__label{
    padding: 0;
  }
  .el-form-item__content{
    padding-left: 12px;
  }
}
</style>
